<template>
    <div>
        <el-form class="form">
            <h2 class="form__title">添加</h2>
            <el-input placeholder="请输入用户名" v-model="uname" clearable @blur="change_uname"></el-input>
            <br>
            <el-input placeholder="手机号/邮箱" v-model="input01" clearable @blur="change_uname02"></el-input>
            <br>
            <el-input placeholder="请输入密码" v-model="input02" show-password></el-input>
            <br>
            <el-input placeholder="再次输入密码" v-model="input03" show-password></el-input>
            <br>
            <label>头像上传</label>
            <el-upload
                    list-type="picture-card"
                    action="#"
                    :limit="1"
                    :auto-upload="false"
                    :accept="accept"
                    :on-change="changeImag"
                    :on-exceed="handleExceed"
                    :before-remove="beforeRemove">
                <i class="el-icon-plus"></i>
            </el-upload>
            <br>
            <el-row>
                <el-col :span="17">
                    <el-button type="primary" icon="el-icon-edit" @click="add">添加</el-button>
                </el-col>
                <el-col  :span="5">
                    <el-button  @click="reset">重置</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>

    //定义全局的正则表达式方便其他方法使用
    let eli = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/

    let phone = /^1[3|4|5|7|8][0-9]{9}$/

    let pwd02 = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/

    export default {
        name: "EideUsers.vue",
        data() {
            return {
                img: "",
                accept: ".jpg,.png",
                uname: "",
                input01: '',
                input02: '',
                input03: '',
            }
        },
        methods: {
            //------------注册-------------//

            //判断用户名否重复
            change_uname() {

                let uname = this.uname

                let users = new URLSearchParams();


                if (uname != undefined && uname != "") {
                    users.append("uName", uname)
                }

                this.$axios.post("queryRepetition.action", users).then(request => {
                    console.log(request.data.msg)
                    if (request.data.msg == '找到了') {
                        this.uname = ""
                        this.warning()
                    }
                }).catch()

            },
            //判断邮箱||手机号是否重复
            change_uname02() {

                let account = this.input01;

                let users = new URLSearchParams();


                if (eli.test(account) || phone.test(account)) {
                    if (!eli.test(account)) {
                        //手机号
                        users.append("phone", account)
                    }
                    if (!phone.test(account)) {
                        //邮箱
                        users.append("mailAddress", account)
                    }
                }

                this.$axios.post("queryRepetition02.action", users).then(request => {
                    console.log(request.data.msg)
                    if (request.data.msg == '找到了') {
                        this.input01 = ""
                        this.warning02()
                    }
                }).catch()

            },
            //添加用户
            add() {

                let account = this.input01

                let pwd01 = this.input02

                let pwd03 = this.input03

                let uname = this.uname

                let users = new FormData();

                if (uname != undefined && uname != "") {

                    //判断邮箱或手机号是否输入正确
                    if (eli.test(account) || phone.test(account)) {
                        if (!eli.test(account)) {
                            //手机号
                            users.append("phone", account)
                        }
                        if (!phone.test(account)) {
                            //邮箱
                            users.append("mailAddress", account)
                        }
                        //成功后判断密码
                        if (pwd02.test(pwd01)) {

                            //判断两次密码是否重复
                            if (pwd01 == pwd03) {

                                users.append("img", this.img.raw)
                                users.append('uName', uname)
                                users.append('uPwd', pwd01)
                                users.append('commercialState', 0)
                                users.append('supplierState', 0)
                                users.append('accountState', 0)

                                //调用异步，进行申请
                                this.$axios({
                                    method: 'post',
                                    url: "addusers.action",
                                    data: users,
                                    headers: {
                                        'Content-Type': 'multipart/form-data'
                                    }
                                }).then(request => {
                                    if (request.data.msg == '成功') {
                                        //成功后调用的方法
                                        this.success()
                                        this.$parent.$parent.getdata()
                                        this.$parent.$parent.dialogVisible = false
                                    }
                                }).catch(err => {
                                    this.$message.warning(err);
                                })


                            } else {
                                //失败后调用提示框方法
                                this.error03()
                            }

                        } else {
                            //失败后调用提示框方法
                            this.error02()
                        }
                    } else {
                        //失败后调用提示框方法
                        this.error01()
                    }

                } else {
                    //失败后调用提示框方法
                    this.error04()
                }


            },
            //成功后调用的方法
            success() {
                this.input01 = ""

                this.input02 = ""

                this.input03 = ""

                this.uname = ""

                this.$message({
                    message: '注册成功',
                    type: 'success'
                });
            },
            //失败后调用提示框方法
            error01() {
                this.$message.error('邮箱或手机号输入错误!');
            },
            //失败后调用提示框方法
            error02() {
                this.$message.error('密码输入错误,长度至少为8，至少含有一个字母和一个数字!');
            },
            //失败后调用提示框方法
            error03() {
                this.$message.error('两次密码必须一致!');
            },
            //失败后调用提示框方法
            error04() {
                this.$message.error('用户名不能为空！');
            },
            //失败后调用提示框方法
            warning() {
                this.$message({
                    message: '该用户名已被使用！',
                    type: 'warning'
                });

            },
            //失败后调用提示框方法
            warning02() {
                this.$message({
                    message: '该邮箱或手机号已被使用！',
                    type: 'warning'
                });

            },
            handleExceed(files, fileList) {
                this.$message.warning(`只能选择一个头像`)
            },
            beforeRemove(file, fileList) {
                if (this.$confirm(`确定移除 ${file.name}？`)) {
                    this.img = file;
                }
            },
            changeImag(file, fileList) {
                //获取文件信息
                this.img = file;
            },
            //重置
            reset() {
                this.uname = ""
                this.input01 = ''
                this.input02 = ''
                this.input03 = ''
                this.img = ""
            }
        }
    }
</script>

<style scoped>

</style>